Una de las preguntas de estos días es sobre blockquotes lo que conocemos por comillas y que normalmente utilizamos para resaltar texto, se pueden utilizar imágenes o unas simples líneas a modo de bordes el resultado de cualquiera de ellos es muy atractivo.
En su día explicaba una forma muy sencilla de añadir blockquotes, con css también podemos conseguir que aparezcan en nuestro texto y añadirle unos estilos. Esa es la parte divertida.
En nuestra plantilla encontraremos algo así:

.post blockquote {
margin:1em 20px;
}

Podemos añadir unas líneas para conseguir otros efectos:
.post blockquote {
color:#333;
width:350px;
margin-top: 10px;
font-size:100%;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 4px double #5C6625;
font: normal helvetica, sans-serif;
}
.post blockquote {
width:350px;
color: #000;
padding: 8px;
font-size:100%;
margin: 10px 0 10px 0px;
text-align: justify;
border-top: 3px dotted #6B2533;
border-bottom: 3px dotted #6B2533;
background: transparent;
font:normal helvetica, sans-serif;
}
.post blockquote {
color: #666666;
margin-left: 20px;
display: block;
margin-right: 20px;
font-size: 90%;
font-family: Verdana,Arial,Helvetica,sans-serif;
line-height: 140%;
background-color: transparent;
background-image: url(url-imagen-comillas);
background-repeat: no-repeat;
padding-top: 2px;
padding-right: 20px;
padding-bottom: 4px;
padding-left: 40px;
}
.post blockquote {
color:#fff;
width:350px;
margin-top: 10px;
font-size:100%;
padding-left: 18px;
padding-right: 18px;
padding-top: 18px;
padding-bottom: 18px;
background-image:url(url-imagen-fondo);
font: normal helvetica, sans-serif;
}
.post blockquote {
color: #0f5718;
font-size: 90%;
display: block;
margin-right: 20px;
line-height: 140%;
margin-left: 20px;
padding-top: 50px;
padding-right: 20px;
padding-bottom: 4px;
padding-left: 70px;
font-family: Verdana,Arial,Helvetica,sans-serif;
background-color: transparent;
background-image: url(url-imagen-comillas);
background-repeat: no-repeat;
}

Más sobre Blockquotes aquí y aquí.

Jaime Trujillo Escobedo

preciosos Gem@ :) la verdad es que son una maravilla :D saludos! ;)

Responder
Gem@

Gracias Jaime, me alegra que te guste y los emoticones también ;)

Responder
Admin

Gem@ sabés que nunca supe usar los blockquotes?
En el editor de Blogger, están, pero no se como se usan, alguna vez que marqué el texto hice click en el icono y no salió nada, están en el editor, también los vi por la plantilla pero no se como marcar un texto para que salga como cita, entre comillado...
Tendría que poner todo ese css?
A mi me gustaría unas simples comillas grandes, que casualmente no es ninguno de los ejemplos que pones aquí...

Que bonitos los cambios!! Me gusta el rojo en los títulos de la sidebar y el santa abajo, precioso, muy fino ;)

Responder
Anónimo

Permiso...si Gem@ me disculpa te contesto yo K_nelita. También estoy queriendo implementar una imagen y leo tu pregunta.
El código es para agregar un detalle, no hay necesidad de ponerlo para que un párrafo salga como cita.
Se selecciona todo el texto, le das clic y listo. Las comillas las ponés vos, claro.
Ahora si querés comillas grandes como imágenes, tenés que encontrar las que te gusten, subirlas a tu hosting y poner el código en tu plantilla que figura a lo último.
Si te fijás en mi blog, todas las entradas comienzan con un texto corto en blockquotes pero sin comillas así: ...esto es un ejemplo.
Espero haberte ayudado a aclarar, porque lo que hacías estaba bien, quizá esperabas otra cosa pero así es el famoso blockquotes.
Saludos a todos!!

Responder
Unknown

has vuelto!!! jajaja Google te ha devuelto la vida!!!
Me encanta como lo has explicado!!! muy bonito...abrazos!!!

Responder
Anónimo

Ufff me costó un poco porque no lograba que se viera la imagen...pero ya estáaaa qué lindo queda! Gracias Gem@
Besitoooss

Responder
Gem@

K_nelita los estilos de las comillas hay que añadirlos a tu gusto puedes hacerlo como viene explicado y añadir donde dice url de imagen la url de tus comillas grandes (hay algunas preciosas que si me da tiempo te las buscaré)
Una vez añadiste los estilos debes ir al editor y marcar de color azul todo el texto que envolverá el entrecomillado aunque también puedes hacerlo añadiendo la etiqueta <blockquote> al principio y </blockquote > al final del texto.
Una manera sencilla de ver como quedan los estilos es dar salida a una entrada con <blockquote> y probar en vista previa los cambios que realizas en los estilos.
-Me quedé a medias con la imagen de la sidebar pero si, no está mal... :)

Gracias Graciela Ventimiglia. Abrazos :)

Graciela jajaja Google se lo cuece y come sólo todo :)

Responder
Admin

Bueno entre las dos lograron confundirme :o un poco mas ja ja jaaa, no, gracias Graciela Ventimiglia!
Entonces, las etiquetas de Blogger que están en el editor, de por si solas no funcionan? Hay que añadirles el css?
Porque marcar el texto como dice Graciela y ponerle yo las comillas, es como que no tiene gracia alguna, mira pongo "gem@" y no preciso marcar nada, solo las pongo desde el teclado.

En el editor muestra unas comillas grandes, parecidas a las del ejemplo tres, yo pensé que se podía poner eso directamente...

Bueno mientras voy a probar a ver si entendí lo que dices gem@ y pondré el css del ej. 3 a ver que pasa...

Como que a medias con los títulos de la sidebar? Ahora están mas lindos todavía con esa puntita plegada, me gusta, muy bonito!

Besos a todas ;)

Responder
Gem@

K_nelita escribes el texto en tu editor.
Pasar el ratón pulsando la tecla izquierda del ratón (eso hace que el texto se ponga de color)
Con el texto de color o sea marcado lo dejas así y marcas la pestaña esa que hay para las comillas verás que las etiquetas se añaden solas.
Y listo, le das salida a ese post y después añades los estilos, vas mirando en vista previa y compruebas los cambios que se van produciendo en el texto que añadiste las comillas y que diste salida.

Responder
Deybi

Hola Gem@.

Esto queda muy lindo y me sirvió.

Saludines!!!.

Responder
Gem@

Me alegra mucho Birdelo :)

Responder
Anónimo

hola GEM@, me gustaria que me dijeras como colocar ese muñequito navideño que tienes al lado derecho para "ir al cielo", por favor si me quieres ayudar hazlo a migue.hit@hotmail.com :)

Responder
Jazziturno

¡Gema! ¡Preciosa!

Muchísimas gracias por seguir al pie del cañón con tantos y tantos consejos. Este es uno de los que más perseguía.

He hecho mis propias comillas, no son gran cosa, pero por si alguien las quisiese aquí dejo el link (son blancas, muy bonitas para fondos oscuros): http://img370.imageshack.us/img370/1778/blockquotemg0.png

Aquí un ejemplo de cómo quedaron :) http://abierto24siete.blogspot.com/2008/12/baudelaire-de-csar-gonzlez-ruano.html

No pensé que al ponerlas, el resto de entradas en las que usé el entrecomillado también se verían 'afectadas' por el invento :P ...notó algunos cambios extraños, como la fuente o el tamaño de otras entradas, no sé a qué se debe. Pero genial, estoy contento del resultado :)

¡Gracias otra vez! Y felices fiestas.

Responder
Gem@

Miguel Jimenez para ir al cielo nada mejor que tomar un avión :)
Es broma claro está, puedes hacerlo de dos formas una sencilla que te lleva a inico.
Ir a INICIO
Y otro con efecto deslizante como el que has visto en mi blog.
Ir a INICIO con efecto deslizante


Jazziturno muchas gracias a ti por ofrecer las comillas que has creado, sobre el tamaño de las fuentes sólo afecta a las que están entrecomillas y las puedes modificar el el código de la CSS en concreto la tuya viene con font-size: 90%;
También puedes hacerlo si en el editor de entradas te sitúas en Redactar y marcando el texto le aumentas o disminuyes el tamaño de fuente.

Felices fiestas ;)

Responder
Unknown

hola gem@!!!! las blockquotes que yo quiero las ves en esta página
http://www.fuentetajaliteraria.com/........ sencillitas, estrechas, al margen y sin nada más que el tipo de letra resaltado en negrita

Responder
Gem@

lk mira aquí ;)

Responder
Unknown

pues hasta ahora lo miro tu comentario, lo intente pero no me da el efecto deslizante que tiene el tuyo.
gracias..

ahhh y otra cosa, me gustaria que me dijeras porque no me sale el formulario de comentarios. Me toca colocar una ventanita emergente. gracias de nuevo.

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top